<template>
  <div id="app">
        <div v-for="item of movies" :key="item" class="item">
            <img :src="item.pic" alt="" class="pic">
            <p class="name">{{item.title}}</p>
                
            <div class="pf">
                <div v-for="value of transfromStar(item.raiting)" :key="value">
                    <img v-if="value>=1.5" src="../images/star.png">
                    <img v-else-if="value>=1" src="../images/ban-star.png">
                    <img v-else src="../images/no-star.png">
                </div>
            </div>
            <p class="fen">{{item.raiting}}</p>
              
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {
      movies:[],
    }
  },
  mounted(){
      let url = "http://localhost:8000/top250";
      axios.get(url).then(res=>{
        this.movies = res.data.result
      })
  },
  methods:{
      handleTitle(value){
          if (value.length > 6) {
              return value.slice(0, 6) + "..."
          }
          return value;
      },
      transfromStar(num){
          let arr = []; 
          for(let i=0;i<5;i++){
          if(num>2){
              arr.push(2)
          }else if(num>1){
              arr.push(Number(num.toFixed(1)))
          }else{
              arr.push(0)
          }
          num=num-2;
          }
          return arr;
      }
  }
}
</script>

<style>
        #app{
            display: grid;
            align-items: center;
            justify-items: center;
            grid-template-columns: repeat(3,1fr);
            grid-row-gap: 20px;
        }
        .item{
            width: 17.5695vw;
        }
        .pic{
            width: 14.6413vw;
            height: 19.7657vw;
        }
        .pf{
            display: flex;
        }
        .pf img{
            width: 2.1962vw;
            height: 2.1962vw;
        }
        .fen{
        display: inline;
        }
    </style>
